<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>编辑权限</title>
    <link rel="stylesheet" href="__STATIC__plug/layui/css/layui.css">
    <link rel="stylesheet" href="__STATIC__admin.css?v=0.1">
</head>

<body class="layui-layout-body">
    <div class="layui-form">
        <input type="hidden" name="id" value="{$id}">
        <div class="layui-form-item permission-list">
            <label class="layui-form-label">拥有权限</label>
            <div class="layui-input-block role-box" id="list">
                {volist name="auth" id="vo"}
                <div class="jq-role-inline">
                    <fieldset class="layui-elem-field">
                        <legend>
                            <div>
                                <span class="checkallspan">
                                    <input type="checkbox"  class="checkall"  value="{$vo['id']}" lay-filter="roleall" lay-skin="primary">
                                </span>
                                <span>{$vo['title']}</span>
                            </div>
                        </legend>
                        <div class="layui-field-box">
                            <ul>
                                <li>
                                    {volist name="vo['child']" id="v"}
                                    <dl>
                                        <input name="role[]" title="{$v['title']}" type="checkbox" value="{$v['id']}" lay-filter="role" lay-skin="primary" {if in_array($v['id'], $auth_group['auth'])}checked{/if}>
                                        <div class="layui-unselect layui-form-checkbox all{$vo['id']}" lay-skin="primary">
                                            <span>{$v['title']}</span>
                                        </div>
                                    </dl>
                                    {/volist}
                                </li>
                            </ul>
                        </div>
                    </fieldset>
                </div>
                {/volist}
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">确定</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="__STATIC__plug/layui/layui.js"></script>
<script>
layui.use(['element', 'jquery', 'layer', 'form'], function() {
    var element = layui.element,
        layer = layui.layer,
        form = layui.form,
        $ = layui.jquery;

    //全选
    form.on('checkbox(roleall)', function(data) {
        if ($(data.elem).parents('.jq-role-inline').find("li").length > 0) {
            if (data.elem.checked) {
                $(data.elem).parents('.jq-role-inline').find("li").find("dl").each(function(i, n) {
                    $(n).find('input').prop("checked", true);
                })
            } else {
                $(data.elem).parents('.jq-role-inline').find("li").find("dl").each(function(i, n) {
                    $(n).find('input').prop("checked", false);
                })
            }
        }
        form.render();
    });

    //单个选中
    form.on('checkbox(role)', function(data) {
        var alls = $(data.elem).parents('.jq-role-inline').find(".checkall");
        if (data.elem.checked) {
            alls.prop("checked", true);
        } else {
            var had_check = false;
            $(data.elem).parents('.jq-role-inline').find('li').find('dl').each(function(i, n) {
                if ($(n).find('input').prop("checked")) {
                    had_check = true;
                }
            })
            if (!had_check) {
                alls.prop("checked", false);
            } else {
                alls.prop("checked", true);
            }
        }
        form.render();
    });

    //初始化选中
    $('.checkall').each(function(i, n) {
        if ($(this).parents('.jq-role-inline').find("li").length > 0) {
            var had_check = false;
            $(this).parents('.jq-role-inline').find("li").find("dl").each(function(i, n) {
                if ($(n).find('input').prop("checked")) {
                    had_check = true;
                }
            })
            if (had_check) $(this).prop("checked", true);
        }
    })
    form.on("submit(*)", function(data) {
        layer.load(1, {
            shade: [0.1, '#ddd'] //0.1透明度的白色背景
        });
        $.ajax({
            url: "{:url('auth_group/editAuth')}",
            data: data.field,
            type: "POST",
            dataType: 'json',
            success: function(res) {
                layer.closeAll('loading');
                if (res.err == 1) {
                    layer.msg(res.msg, { icon: 5 });
                    return false;
                }
                var index = parent.layer.getFrameIndex(window.name);
                layer.msg(res.msg, { icon: 1, time: 1000 }, function() {
                    parent.location.reload()
                    parent.layer.close(index);
                });
            },
            error: function() {
                var index = parent.layer.getFrameIndex(window.name);
                layer.msg("ERROR", { icon: 5, time: 1000 }, function() {
                    parent.location.reload()
                    parent.layer.close(index);
                });
            }
        });
    });
    form.render();
});
</script>

</html>